<!-- 基本信息页面 -->
<template>
  <div>
    <van-nav-bar fixed placeholder title="登记" left-arrow @click-left="onClickLeft" />
    <div class="person-info">
      <div class="info">
        基本信息
      </div>
      <div class="basicForm">
        <div class="moreSty">
          <van-field v-model="basicForm.name" class="basicClass" label="姓名" required placeholder-style="color:#999;" placeholder="请输入姓名" type="input" @change="basicForm.name = $event.detail" />
        </div>
        <div class="moreSty">
          <drop-Down :columns="genderList" :value="basicForm.gender" :required="true" :label-name="'性别'" @changeValue="changeValue" />
          <!-- <van-field class="basicClass" label="性别" required placeholder-style="color:#999;" placeholder="请输入性别"  type="input"  v-model="basicForm.gender" @change="basicForm.gender = $event.detail" /> -->
        </div>
        <div>
          <van-field v-model="basicForm.birthDate" label="出生年月" placeholder-style="color:#999;" readonly is-link input-align="right" placeholder="请选择" clickable @click-input="clickBirth" />
          <van-popup :show="showBirth" position="bottom">
            <van-datetime-picker type="date" :value="currentDate" :min-date="minDate" :basic-formatter="basicFormatter" @confirm="onBrith" @cancel="onCancelBrith" />
          </van-popup>
        </div>
        <div>
          <drop-Down :value="basicForm.education" :columns="columns" :required="true" :label-name="'学历'" @changeValue="changeValue" />
        </div>
        <div class="moreSty">
          <van-field v-model="basicForm.speciality" class="basicClass" label="专业" placeholder-style="color:#999;" placeholder="请输入专业" type="input" @change="basicForm.speciality = $event.detail" />
        </div>
        <div class="moreSty">
          <van-field v-model="basicForm.technologyName" class="basicClass" label="技术职称" placeholder-style="color:#999;" autosize placeholder="请输入技术职称" type="textarea" @change="basicForm.technologyName = $event.detail" />
        </div>
        <div>
          <drop-Down :value="basicForm.computerLevel" :columns="skillList" :label-name="'计算机水平'" @changeValue="changeValue" />
        </div>
        <div>
          <van-field v-model="basicForm.workDate" label="参加工作时间" placeholder-style="color:#999;" readonly is-link input-align="right" placeholder="请选择" clickable @click-input="clickWork" />
          <van-popup :show="showWorkHour" position="bottom">
            <van-datetime-picker type="date" :value="currentDates" :min-date="minDate" :basic-formatter="basicFormatter" @confirm="onWork" @cancel="onCancelWork" />
          </van-popup>
        </div>
        <div class="moreSty">
          <van-field v-model="basicForm.mobile" class="basicClass" label="手机号码" placeholder-style="color:#999;" placeholder="请输入手机号" type="tel" @blur="onBlur" @change="basicForm.mobile = $event.detail" />
        </div>
        <div class="moreSty">
          <van-field v-model="basicForm.idNumber" class="basicClass" label="身份证号码" placeholder-style="color:#999;" placeholder="请输入身份证号码" type="idcard" @blur="onBlurIdCard" @change="basicForm.idNumber = $event.detail" />
        </div>
        <div>
          <drop-Down :value="basicForm.desireSalary" :columns="maritals" :label-name="'期望薪资'" @changeValue="changeValue" />
        </div>
        <div class="moreSty">
          <van-field v-model="basicForm.address" class="basicClass" label="现居住地" autosize placeholder-style="color:#999;" placeholder="请输入现居住地" type="textarea" @change="basicForm.address = $event.detail" />
        </div>
      </div>
      <div class="infoBtn">
        <van-button size="large" :class="showSubmit?'submit':'noSubmit'" round @click="submitPerson">
          确认并提交
        </van-button>
      </div>
    </div>
    <van-toast id="van-toast" />
  </div>
</template>
<script>
import dropDown from '../drop-down.vue'
import IdentityCodeValid, { checkMobile } from '../../../../utils/rule'

import Toast from '@/wxcomponents/vant/toast/toast'
export default {
  components: { dropDown },
  data() {
    return {
      showSubmit: false,
      basicForm: {
        name: '',
        gender: '',
        birthDate: '',
        education: '',
        speciality: '',
        technologyName: '',
        computerLevel: '',
        workDate: '',
        mobile: '',
        idNumber: '',
        desireSalary: '',
        address: '',
      },
      currentDate: new Date().getTime(),
      minDate: new Date(1970, 1, 1).getTime(),
      currentDates: new Date().getTime(),
      // 学历
      showPicker: false,
      // 学历list
      columns: ['研究生以上', '研究生', '本科', '大专', '大专以下'],
      // 婚否
      showMarital: false,
      // 婚否list
      maritals: ['1000', '2000', '3000'],
      skillList: ['一般', '很强'],
      genderList: ['男', '女'],
      showDrive: false,
      showBirth: false,
      showWorkHour: false,
      labelName: '',
    }
  },
  onLoad() {
    const basic = uni.getStorageSync('basic')
    if (basic) {
      this.basicForm = basic
      if (basic.isBasicOk) {
        this.showSubmit = true
      }
    }
  },
  methods: {
    onClickLeft() {
      uni.navigateBack()
    },
    // 电话号码失去焦点
    onBlur(val) {
      const number = checkMobile(val.detail.value)
      if (!number) {
        this.basicForm.mobile = ''
      }
    },
    onBlurIdCard(val) {
      const ident = val.detail.value
      const idcard = ident.toUpperCase()
      const res = IdentityCodeValid(idcard)
      if (!res) {
        this.basicForm.idNumber = ''
      }
    },
    // 处理控件显示的时间格式
    basicFormatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    // 选择值
    changeValue(val) {
      switch (val.name) {
        case '性别':
          this.basicForm.gender = val.value
          break
        case '学历':
          this.showSubmit = true
          this.basicForm.education = val.value
          break
        case '计算机水平':
          this.basicForm.computerLevel = val.value
          break
        case '期望薪资':
          this.basicForm.desireSalary = val.value
          break
      }
    },
    clickBirth() {
      this.showBirth = true
    },
    onBrith(val) {
      const date = new Date(val.detail)
      const Year = date.getFullYear()
      const Moth = (date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1)
      const Day = (date.getDate() < 10 ? `0${date.getDate()}` : date.getDate())
      const GMT = `${Year}-${Moth}-${Day}`
      this.basicForm.birthDate = GMT
      this.showBirth = false
    },
    onCancelBrith() {
      this.showBirth = false
    },
    clickWork() {
      this.showWorkHour = true
    },
    onWork(val) {
      const date = new Date(val.detail)
      const Year = date.getFullYear()
      const Moth = (date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1)
      const Day = (date.getDate() < 10 ? `0${date.getDate()}` : date.getDate())
      const GMT = `${Year}-${Moth}-${Day}`
      this.basicForm.workDate = GMT
      this.showWorkHour = false
    },
    onCancelWork() {
      this.showWorkHour = false
    },
    submitPerson() {
      if (this.basicForm.name === '' || this.basicForm.name.trim().length === 0) {
        Toast('请填写姓名')
        return
      }
      if (this.basicForm.gender === '' || this.basicForm.gender.trim().length === 0) {
        Toast('请填写性别')
        return
      }
      if (this.basicForm.education === '' || this.basicForm.education.trim().length === 0) {
        Toast('请填写学历')
        return
      }
      this.basicForm.isBasicOk = true
      uni.setStorageSync('basic', this.basicForm)
      uni.navigateBack({
        url: '/package-guest/pages/info-regist/info-write/index',
      })
      // uni.navigateTo({
      //   url: '/package-guest/pages/info-regist/info-write/index',
      // })
    },
  },
}
</script>
<style lang="scss" scoped>
.person-info{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  .info{
    width: 90%;
    padding: 0px 0px 0px 10px;
    margin: 15px 0px;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    border-left: 2px solid #739ECA;
  }
.basicForm{
  width: 93%;
  margin: 0 auto;
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06);
  border-radius: 2px;
}
  .infoBtn{
    text-align: center;
    padding-top: 15%;
    padding-bottom: 10%;
    width: 80%;
  }
}
</style>
  <style lang="scss">
  .moreSty{
    .van-field__body{
      padding-right: 16px;
    }
  }
  .basicForm{
    .van-cell{
      padding: 10px 5px 10px 2px !important;
    }
    .van-cell__title{
    padding-left:16px;
  }
  .van-field__control{
    color:#999 !important;
    font-size: 14px;
  }
  .van-icon:before{
    color:#999;
  }
  .van-field__label{
    color:#333 !important;
  }
  }
  .infoBtn{
    .noSubmit{
      .van-button--round {
        height: 36px;
        width: 75%;
        background: #ccc !important;
        color: #fff !important;
        font-size: 16px !important;
      }
    }
    .submit{
      .van-button--round {
        height: 36px;
        width: 75%;
        background: #029b00!important;
        color: #fff !important;
        font-size: 16px !important;
      }
    }
  }
  .basicClass{
  view {
    label{
      width:100%;
      display: flex;
      white-space: nowrap;
    }
    input{
      padding-right: 8px;
      text-align: right;
    }
    textarea{
      padding-right: 8px;
      text-align: right;
    }
  }
}
  </style>
